<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="test_01"></div>
  <div id="test_02"></div>
  <div id="test_03"></div>
  <div id="test_04"></div>

  <script type="text/template" id="tplt_01">
    {{  prefix   }}<h3>{{ time   }}我买了{{ thing }}, 好{{mood}}</h3>{{ surfix}}
  </script>

  <script type="text/template" id="tplt_02">
    <h3>我请您吃</h3>
      <ul>
        {{#food}}
          <li>{{.}}</li>
        {{/food}}
      </ul>
  </script>

  <script type="text/template" id="tplt_03">
    <div>
      <ol>
        {{#students}}
          <li>
            学生{{name}}的爱好是
            <ol>
              {{#hobbies}}
                <li>{{.}}</li>
              {{/hobbies}}
            </ol>
          </li>
        {{/students}}
      </ol>
    </div>
  </script>

  <script type="text/template" id="tplt_04">
    <h3>{{person.name}}的旁边是{{person.next.name}}, Ta的旁边是{{person.next.next.name}}</h3>
  </script>

  <script src="/public/mini-tplt.js"></script>
  <script>
    // document.getElementById('test_01').innerHTML = TemplateEngine.render(
    //   document.getElementById('tplt_01').innerHTML,
    //   {
    //     time: '昨天',
    //     thing: 'something to eat',
    //     mood: '高兴',
    //     prefix: '前缀',
    //     surfix: '后缀',
    //   }
    // );

    // document.getElementById('test_02').innerHTML = TemplateEngine.render(
    //   document.getElementById('tplt_02').innerHTML,
    //   {food: ['蒸羊羔', '蒸鹿尾儿', '蒸熊掌', '...']}
    // );


    // document.getElementById('test_03').innerHTML = TemplateEngine.render(
    //   document.getElementById('tplt_03').innerHTML,
    //   {
    //     students: [
    //       { name: 'Wango', hobbies: ['吃饭', '睡觉', '写BUG'] },
    //       { name: 'Lily', hobbies: ['教书', '育人'] },
    //       { name: 'Tom', hobbies: ['放长线', '钓大鱼', '承包大海'] }
    //     ]
    //   }
    // );

    document.getElementById('test_04').innerHTML = TemplateEngine.render(
      document.getElementById('tplt_04').innerHTML,
      {person: {
        name: 'Wango',
        next: {
          name: 'Lily',
          next: {
            name: 'Tom'
          }
        }
      }}
    );
  </script>
</body>

</html>